<template>
  <div class="about">
    <mt-header  title="选择支付方式">
      <mt-button icon='back' slot='left'  @click="$router.back()">返回</mt-button>
    </mt-header>
    <ul>
      <li>
        <input type='radio' name='select' style="width:20px;height:20px"/>
        <img src="../assets/01.jpg" alt="">
        <span>支付宝</span>
      </li>
      <li><input type='radio' name='select' style="width:20px;height:20px"/>
        <img src="../assets/02.jpg" alt="">
        <span>微信</span></li>
      <li>
        <input type='radio' name='select' style="width:20px;height:20px"/>
        <img src="../assets/03.jpg" alt="">
        <span>银联</span>
      </li>
      <li>
        <input type='radio' name='select' style="width:20px;height:20px"/>
        <img src="../assets/04.jpg" alt="">
        <span>账户余额</span>
      </li>
    </ul>
   <div  id="foot"   >
     <div >确定</div>
     <div >取消</div>
   </div>
  </div>
</template>
<style scoped>
ul{
  list-style: none;
 
}
li{
  height: 50px;
 padding: 10px  0;
  border-top: 1px solid black;
  align-items: center;
}
input{
  margin-left: 20px;
}
img{
  width: 50px;
   vertical-align: middle;
   margin: 0px  20px;
}
#foot{
    position: fixed;
    bottom: 0;
    display: flex;
    width: 100%;
    height: 50px;
    background-color: #eee;
}
#foot div{
    width: 50%;
   text-align: center;
   line-height: 50px;
   border-style: none;
    border-radius: 20px;
}
</style>